import { Form, Button, Modal, Input } from 'antd';

const UpdateForm = ({
  onSubmit: handleUpdate,
  onCancel: handleUpdateModalVisible,
  updateModalVisible,
  type: type, //0:添加,1:编辑,2:查看
}) => {
  console.log('*******type*****');
  console.log(type);
  const handleConfirm = async (fieldsValue) => {
    let feilds = {
      ...fieldsValue,
      id: updateModalVisible.id,
    };
    console.log('*******fieldsValue*****');
    console.log(feilds);
    handleUpdate(feilds);
  };

  const RenderContent = () => {
    return (
      <Form
        name="basic"
        labelCol={{
          span: 8,
        }}
        wrapperCol={{
          span: 16,
        }}
        onFinish={handleConfirm}
        autoComplete="off"
      >
        <Form.Item
          label="任务标签"
          name="name"
          rules={[{ required: true, message: '请输入任务标签!' }]}
        >
          <Input maxLength={256} />
        </Form.Item>
        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit">
            创建
          </Button>
        </Form.Item>
      </Form>
    );
  };
  const EditRenderContent = () => {
    return (
      <Form
        name="basic"
        labelCol={{
          span: 8,
        }}
        wrapperCol={{
          span: 16,
        }}
        initialValues={updateModalVisible}
        onFinish={handleConfirm}
        autoComplete="off"
      >
        <Form.Item
          label="任务标签"
          name="name"
          rules={[{ required: true, message: '请修改任务标签!' }]}
        >
          <Input maxLength={256}/>
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit">
            修改
          </Button>
        </Form.Item>
      </Form>
    );
  };
  const SearchRenderContent = () => {
    return (
      <Form
        name="basic"
        labelCol={{
          span: 8,
        }}
        wrapperCol={{
          span: 16,
        }}
        onFinish={handleConfirm}
        autoComplete="off"
      >
        <Form.Item label="姓名" name="username">
          {'张三'}
        </Form.Item>
        <Form.Item label="部门" name="department">
          {'张三'}
        </Form.Item>
        <Form.Item label="联系方式" name="phone">
          {12312312313}
        </Form.Item>
      </Form>
    );
  };

  return (
    <Modal
      width={640}
      destroyOnClose
      title={type == 0 ? '添加任务标签' : type == 1 ? '编辑任务标签' : '查看任务标签'}
      visible={updateModalVisible}
      footer={null}
      onCancel={() => handleUpdateModalVisible()}
    >
      {type == 0 && <RenderContent />}
      {type == 1 && <EditRenderContent />}
      {type == 2 && <SearchRenderContent />}
    </Modal>
  );
};

export default UpdateForm;
